<template>
	<view class="">
		<view class="" style="height: 80px;width: 100vw;"></view>
		<view class="tabbar-container animated fadeIn">
			<block>
				<view class="tabbar-item" v-for="(item, index) in tabbarList"
					:class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
					<view class="item-top">
						<image :src="currentItem == item.id ? item.selectIcon : item.icon" mode=""></image>
					</view>
					<view class="item-bottom" :style="{'color':currentItem == item.id ? PUBLIC_STYLE.color : '' }">
						<text>{{ item.text }}</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentItem: 0,
				currentPath:'',
				tabbarList: [{
						id: 0,
						path: '/pages/index/index',
						icon: '/static/image/A.png',
						selectIcon: '/static/image/A_c.png',
						text: '首页',
						centerItem: false
					},
					{
						id: 1,
						path: '/pages/goods/classification',
						icon: '/static/image/fenlei.png',
						selectIcon: '/static/image/fenlei_c.png',
						text: '分类',
						centerItem: false
					},
					{
						id: 3,
						path: '/pages/goods/shopping_cart',
						icon: '/static/image/gwc.png',
						selectIcon: '/static/image/gwc_c.png',
						text: '购物车',
						centerItem: false
					},
					{
						id: 4,
						path: '/pages/mine/index',
						icon: '/static/image/O.png',
						selectIcon: '/static/image/O_c.png',
						text: '我的',
						centerItem: false
					}
				]
			};
		},
		created() {
			uni.hideTabBar({
				animation:true
			});
			let pages = getCurrentPages()
			this.currentPath = '/'+pages[pages.length - 1].route
			this.currentItem = this.tabbarList.find((e)=>e.path == this.currentPath)?.id ?? -1
		},
		mounted() {
		},
		methods: {
			changeItem(item) {
				let _this = this;
				uni.reLaunch({
					url: item.path
				})
			}
		}
	};
</script>
<style lang="scss">
	$theme-color:'';
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.tabbar-container {
		width: 100vw;
		height: 80px;
		position: fixed;
		box-sizing: border-box;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		box-shadow: 0 0 12rpx #e1e1e1;
		display: flex;
		align-items: center;
		padding: 0 0 50rpx 0;
		color: #999999;
		background-color: white;
		
		.tabbar-item {
			width: 25%;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			
			.item-top {
				width: 62rpx;
				height: 70rpx;
				padding: 10rpx;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			.item-bottom {
				margin: auto 0 0 0;
				width: 100%;
				
				text{
					font-size: 24rpx;
				}
			}
		}
	}

	.tabbar-container .center-item {
		position: relative;
		
		.item-top {
			height: 100rpx;
			width: 100rpx;
			position: absolute;
			top: -30rpx;
			left: 50%;
			transform: translateX(-50%);
			box-shadow: 2rpx 2rpx 12rpx #e1e1e1;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: white;
		}
		
	}
</style>